<sqx-layout innerWidth="55" layout="main" titleIcon="settings" titleText="i18n:common.settings">
    <ng-container>
        <sqx-list-view innerWidth="55rem">
            <ng-container content>
                <form [formGroup]="updateForm.form" (ngSubmit)="save()">
                    <h5>{{ "apps.generalSettings" | sqxTranslate }}</h5>

                    <div class="card mb-4">
                        <div class="card-body">
                            <sqx-form-error [error]="updateForm.error | async" />
                            <div class="form-group">
                                <label for="email">{{ "common.name" | sqxTranslate }}</label>
                                <input class="form-control" readonly [value]="app.name" />
                            </div>

                            <div class="form-group">
                                <label for="label">{{ "common.label" | sqxTranslate }}</label>
                                <sqx-control-errors for="label" />
                                <input class="form-control" id="label" formControlName="label" maxlength="100" />
                            </div>

                            <div class="form-group">
                                <label for="description">{{ "common.description" | sqxTranslate }}</label>
                                <sqx-control-errors for="description" />
                                <input class="form-control" id="description" formControlName="description" maxlength="100" />
                            </div>
                        </div>

                        <div class="card-footer">
                            <button class="float-end btn btn-primary" [disabled]="!isEditable" type="submit">
                                {{ "common.save" | sqxTranslate }}
                            </button>
                        </div>
                    </div>
                </form>

                <h5>{{ "apps.image" | sqxTranslate }}</h5>

                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-auto">
                                <div
                                    class="app-image"
                                    [sqxDropDisabled]="uploading || !isEditableImage"
                                    (sqxDropFile)="uploadImage($event)"
                                    sqxDropNoPaste="true"
                                    sqxDropOnlyImages="true">
                                    @if (uploading) {
                                        <div class="app-progress"><sqx-progress-bar mode="Circle" [value]="uploadProgress" /></div>
                                    } @else {
                                        <div>
                                            <sqx-avatar [identifier]="app.name" [image]="app.image" size="150" />
                                            @if (isEditableImage && app.image) {
                                                <button class="btn btn-danger btn-sm app-image-remove" (click)="removeImage()" title="i18n:apps.removeImage">
                                                    <i class="icon-bin2"></i>
                                                </button>
                                            }
                                        </div>

                                        <div class="drop-overlay align-items-center justify-content-center">
                                            <div class="drop-overlay-background"></div>

                                            <div class="drop-overlay-text">{{ "apps.imageDrop" | sqxTranslate }}</div>
                                        </div>
                                    }
                                </div>
                            </div>

                            <div class="col align-self-center">
                                <sqx-form-hint> {{ "apps.uploadImage" | sqxTranslate }} </sqx-form-hint>
                                <span class="btn btn-success upload-button" [class.disabled]="!isEditableImage" (click)="fileInput.click()">
                                    <span>{{ "apps.uploadImageButton" | sqxTranslate }}</span>
                                    <input
                                        #fileInput
                                        accept="image/x-png,image/gif,image/jpeg"
                                        (change)="uploadImage($any($event.target!)['files'])"
                                        single
                                        type="file" />
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <h5>{{ "apps.generalSettingsDangerZone" | sqxTranslate }}</h5>

                <div class="card card-body">
                    <form [formGroup]="transferForm.form" (ngSubmit)="transfer()">
                        <div class="row pt-2 g-2">
                            <div class="col-6">
                                <h5>{{ "apps.transferTitle" | sqxTranslate }}</h5>
                                <sqx-form-hint> {{ "apps.transferWarning" | sqxTranslate }} </sqx-form-hint>
                            </div>

                            <div class="col">
                                <select class="form-select" formControlName="teamId">
                                    <option [ngValue]="null">-</option>

                                    @for (team of teamsState.snapshot.teams; track team) {
                                        <option [ngValue]="team.id">{{ team.name }}</option>
                                    }
                                </select>
                            </div>

                            <div class="col-auto">
                                <button class="btn btn-primary" [disabled]="!isTransferable" type="button" type="submit">
                                    {{ "apps.transfer" | sqxTranslate }}
                                </button>
                            </div>
                        </div>
                    </form>

                    <hr />

                    <div class="row">
                        <div class="col">
                            <h5>{{ "apps.delete" | sqxTranslate }}</h5>
                            <sqx-form-hint> {{ "apps.deleteWarning" | sqxTranslate }} </sqx-form-hint>
                        </div>

                        <div class="col-auto">
                            <button
                                class="btn btn-danger"
                                confirmText="i18n:apps.deleteConfirmText"
                                confirmTitle="i18n:apps.deleteConfirmTitle"
                                [disabled]="!isDeletable"
                                (sqxConfirmClick)="deleteApp()"
                                type="button">
                                {{ "apps.delete" | sqxTranslate }}
                            </button>
                        </div>
                    </div>
                </div>
            </ng-container>
        </sqx-list-view>
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.history' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="history"
                routerLinkActive="active"
                sqxTourStep="history"
                title="i18n:common.history"
                titlePosition="left">
                <i class="icon-time"></i>
            </a>
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.help' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="help"
                routerLinkActive="active"
                sqxTourStep="help"
                title="i18n:common.help"
                titlePosition="left">
                <i class="icon-help2"></i>
            </a>
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet>
